<!DOCTYPE HTML>
<html>
<head>
    <title>滑动侧边栏演示页面</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="applicable-device" content="mobile">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/zepto.aslider.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="./style.css" media="screen" title="no title" charset="utf-8">
    <script src="http://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
    <script type="text/javascript" src="./js/zepto.fx.js"></script>
    <script type="text/javascript" src="./js/zepto.fx_methods.js"></script>
    <script type="text/javascript" src="./js/zepto.aslider.js"></script>
</head>
<body>
    <nav></nav>
    <!-- 定义侧滑的入口对象 -->
    <button data-aslider-in="1000|fade|bottom">演示</button>
    <button data-aslider-in="info|fade">说明</button>
    <div class="overflow">演示解决body长度超出window时，slider的冲突问题</div>
    <button data-aslider-in="1000|fade|bottom">演示</button>
    <!-- 定义一个侧滑侧边栏 -->
    <aside class="slider1 aslider" data-aslider="1000">
        <!-- 定义一个包裹器，用来进行滑动特效和上下拖动特效 -->
        <div class="wrapper bgc1">
            <!--如果需要自定义一个滚动区域，就给一个div加入scroll类,给他的子包裹器加入slider类即可-->
            <!--如果aslider下没有slider类，那么会自动创建slider包裹器，并把wrapper下的所有dom放到slider下-->
            <!--如果没有scroll，那么会自动为slider创建一个上层scroll-->
            <!--建议手写slider和scroll，避免未知bug-->
            <h4>tttt</h4>
            <div class="scroll">
                <ul class="slider">
                    <li>
                        <button data-aslider-in="slider2|fade|right" type="button" name="button">next</button>
                    </li>
                    <li>
                        <button class="close">关闭</button>
                    </li>
                    <li>可以用手指(鼠标不行)上下拖动</li>
                    <li>点击左侧空白也可以关闭</li>
                    <li>line 1</li>
                    <li>line 2</li>
                    <li>line 3</li>
                    <li>line 4</li>
                    <li>line 5</li>
                    <li>line 6</li>
                    <li>line 7</li>
                    <li>line 8</li>
                    <li>line 9</li>
                    <li>line 10</li>
                    <li>line 11</li>
                    <li>line 12</li>
                </ul>
            </div>
        </div>
    </aside>
    <!-- 这是一个背景渐变的例子 -->
    <aside class="aslider close" data-aslider="slider2" data-aslider-fade>
        <div class="wrapper bgc2">
            <div class="slider box ">
                <button data-aslider-in="slider3">next</button>
                <p>fade特效，点击左侧透明区域关闭</p>
            </div>
        </div>
    </aside>
    <!-- 这是一个全屏的例子 -->
    <aside class="aslider" data-aslider="slider3" data-aslider-fade>
        <dl class="wrapper bgc3">
            <dt>
                <h2>点右侧x关闭</h2>
                <span class="close btn">X</span>
            </dt>
            <dd>line 1</dd>
            <dd>line 2</dd>
            <dd>line 3</dd>
            <dd>line 4</dd>
            <dd>line 5</dd>
            <dd>line 6</dd>
        </dl>
    </aside>
    <article class="aslider" data-aslider="info">
        <section class="wrapper close">
            <div class="slider">
                <h2>css类，dom嵌套规则</h2>
                <p>一个侧边栏必须由两层dom嵌套，外侧元素必须带有名为<strong>aslider</strong>的css类，内层元素必须带有名为<strong>wrapper</strong>的css类</p>
                <p>标签不带有任何限制</p>
                <h3>.aslider</h3>
                <p>这个css类，是滑动侧边栏的根类</p>
                <h3>.wrapper</h3>
                <p>这个css类，是滑动侧边栏内容的包裹器，具体内容在这里填充，并且其实现了滑动特效。可以改变其大小，如宽度，实现各种风格的侧边栏</p>
                <h3>.close</h3>
                <p>加入了close的类，点击后就会关闭滑动侧边栏</p>
                <h3>.bg</h3>
                <p>插件自动生成的背景层，用来实现渐入渐出特效，默认color是黑色，透明度0.4，可根据实际需求覆盖css</p>
                <h3>竖直方向拖动</h3>
                <p>为解决当前线上侧边栏竖直拖动的bug，自带竖直方向拖动功能</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
            <button class="close">back</button>
            <button class="right" data-aslider-in="info2|top">next</button>
        </section>
    </article>
    <article class="aslider" data-aslider="info2">
        <section class="wrapper close">
            <div class="slider">
                <h2>data属性</h2>
                <h3>data-aslider属性<strong>（必填）</strong></h3>
                <p>data-aslider属性，是滑动侧边栏的标识，请保持此标识的值唯一</p>
                <h3>data-aslider-in属性<strong>（必填）</strong></h3>
                <p>data-aslider-in属性，是用来标识滑动侧边栏关联对象的属性，将其值指向一个data-aslider,即可形成关联关系</p>
                <h3>data-aslider-fade <strong>（选填）</strong></h3>
                <p>可选属性data-aslider-fade，若aslider有这个属性，则会出现背景渐变特效</p>
            </div>
            <button class="close">back</button>
            <button class="right" data-aslider-in="info3|bottom">next</button>
        </section>
    </article>
    <article id="info3" class="aslider" data-aslider="info3">
        <section class="wrapper close">
            <div class="slider">
                <p>也可以通过控制aslider的宽高，达到滑动侧边栏不影响底层的效果</p>
            </div>
            <button class="close">back</button>
        </section>
    </article>
</body>

</html>
